{% extends 'backend_loyout.html' %}

{% block title %}后台管理-报障管理{% endblock %}
{% block css %}
    <style>
        .article-manage-title {
            width: 100%;
            height: 48px;
            line-height: 48px;
            list-style: none;
        }

        .article-manage-title li {
            display: inline-block;
            margin-right: 5px;
        }
        .pager {
            float: right;
        }
    </style>
{% endblock %}
{% block content %}
    <ul class="article-manage-title">
        <li style="color: #2aabd2">报障管理</li>
        <li><i class="fa fa-arrow-right" style="margin-right: 5px;"></i>障单列表</li>
    </ul>
    <div class="clearfix"
         style="height: 36px;line-height: 35px;padding: 0 15px;border-top: 1px solid #dddddd;background-color: #f1f0f0">
        <i class="fa fa-table" aria-hidden="true"></i>
        我的报障单({{ result.count }}单)
        <a target="_blank" href="{% url 'backend:trouble_create' %}" class="right"
           style="display: inline-block;padding:0 10px;background-color: #428bca;color: #ffffff;">
            <i class="fa fa-plus-circle" aria-hidden="true"></i>
            创建报障单
        </a>
    </div>
    <div style="padding-left: 20px;">
        <table id="tb" class="table table-bordered">
            <thead>
            <tr>
                <th class="col-md-4">报障标题</th>
                <th class="col-md-2">状态</th>
                <th class="col-md-2">创建时间</th>
                <th class="col-md-2">处理人</th>
                <th class="col-md-2">操作</th>
            </tr>
            </thead>
            <tbody>
            {% for row in result %}
                <tr nid="{{ row.id }}">
                    <td><a href="{% url 'backend:trouble_detail' row.id %}">{{ row.title }}</a></td>
                    <td>{{ row.get_status_display }}</td>
                    <td>{{ row.ctime }}</td>
                    <td>{{ row.processor.nickname }}</td>
                    <td>
                        {% if row.status == 1 %}
                            <a nid="{{ row.id }}" id="del-btn" ntitle="{{ row.title }}" class="btn btn-danger btn-xs">
                                <i class="fa fa-times"></i>删除
                            </a>
                            |
                            <a class="btn btn-primary btn-xs" href="{% url 'backend:trouble_edit' row.id %}">
                                <i class="fa fa-pencil-square-o"></i> 编辑
                            </a>
                        {% elif row.status == 2 %}
                            <a nid="{{ row.id }}" id="del-btn" ntitle="{{ row.title }}" class="btn btn-danger btn-xs">
                                <i class="fa fa-times"></i> 删除
                            </a>
                        {% elif row.status == 3 %}
                            {% if not row.evaluate %}
                                <a class="btn btn-primary btn-xs" id="eva-btn" nid="{{ row.id }}"
                                   ntitle="{{ row.title }}" nprocessor="{{ row.processor.nickname }}"
                                   nsolution="{{ row.solution }}">
                                    <i class="fa fa-pencil-square-o"></i> 评分
                                </a>
                            {% endif %}
                        {% endif %}
                        <a href="{% url 'backend:trouble_detail' row.id %}" class="btn btn-success btn-xs">
                            <i class="fa fa-pencil"></i> 查看
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    </div>
    <div class="pager">
        <ul class="pagination">
            {{ page_str }}
        </ul>
    </div>

    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">删除报障单</h4>
                </div>
                <div class="modal-body">
                    {#                    确认删除分类: <span id="del-class-name" nid=""></span>？#}
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">报障单标题</label>
                            <input type="text" class="form-control" id="del-class-name" value="" nid="" readonly>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="del-confirm">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="evaModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">报障单评价</h4>
                </div>
                <div class="modal-body">
                    <form id="fm">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">报障单标题</label>
                            <input type="text" class="form-control" id="eva-class-name" value="" nid="" readonly>
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">处理人</label>
                            <input type="text" class="form-control" id="pro-class-name" value="" readonly>
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">处理结果</label>
                            <textarea class="form-control" rows="3" id="solution-class-name" readonly></textarea>
                        </div>
                        <div class="form-group">评价
                            <select id="evalute" style="width:80px;height: 35px;">
                                {% for row in evalute %}
                                    <option value="{{ row.0 }}">{{ row.1 }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="eva-confirm">提交</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            bindDel();
            bindDelConfirm();
            bindEva();
            bindEvaConfirm();
        });

        function bindEvaConfirm() {
            $('#eva-confirm').click(function () {
                var id = $('#eva-class-name').attr('nid');
                var evalute = $('#evalute').val();
                console.log(id,evalute);
                $.ajax({
                    url: '{% url "backend:trouble_evalute" %}',
                    type: 'POST',
                    data: {'id': id,'evalute':evalute},
                    dataType: 'JSON',
                    success: function (arg) {
                        console.log(arg);
                        if (arg.status) {
                            console.log($(this));
                            window.location.reload();
                            //$('#delModal').modal('hide');
                        }
                        else {
                            alert(arg.message);
                        }
                    }
                })
            })
        }

        function bindEva() {
            $('#tb').on('click', '#eva-btn', function () {
                $('#evaModal').modal('show');
                var name = $(this).attr('ntitle');
                var id = $(this).attr('nid');
                var processor = $(this).attr('nprocessor');
                var solution = $(this).attr('nsolution');
                console.log(name, id);
                $('#eva-class-name').attr('nid', id);
                $('#pro-class-name').val(processor);
                $('#solution-class-name').val(solution);
                $('#eva-class-name').val(name);
            })
        }

        function bindDelConfirm() {
            $('#del-confirm').click(function () {
                var id = $('#del-class-name').attr('nid');
                //console.log(id);
                $.ajax({
                    url: '{% url "backend:trouble_del" %}',
                    type: 'GET',
                    data: {'id': id},
                    dataType: 'JSON',
                    success: function (arg) {
                        //console.log(arg);
                        if (arg.status) {
                            //console.log($(this));
                            $('tr[nid="' + id + '"]').remove();
                            $('#delModal').modal('hide');
                        }
                        else {
                            alert(arg.message);
                        }
                    }
                })
            })
        }


        function bindDel() {
            $('#tb').on('click', '#del-btn', function () {
                $('#delModal').modal('show');
                var name = $(this).attr('ntitle');
                var id = $(this).attr('nid');
                //console.log(name, id);
                $('#del-class-name').attr('nid', id);
                $('#del-class-name').val(name);
                //$('#del-class-name').text(name);
            })
        }
    </script>
{% endblock %}